<template>
  <div>
    <!--    <Progress :val="val" v-if="loading"/>-->
    <div class="loading-style" v-if="loading"></div>
    <div :class="{loading:loading}">
      <vue-header/>
      <div class="clearfix" :class="className">
        <slot></slot>
      </div>
      <vue-footer/>
    </div>
  </div>
</template>

<script>


  import VueHeader from "../header";
  import VueFooter from "../footer";
  import {mapState} from "vuex";
  import Progress from "@/components/Progress";
  import {getGitalkIssue} from "@/api/home";

  export default {
    name: "layout-slot",
    components: {Progress, VueFooter, VueHeader},
    data() {
      return {
        val: 0
      }
    },
    computed: {
      ...mapState({
        loading: state => state.showLoading
      })
    },
    props: {
      className: String,
      bodyImage: {
        type: String,
        default: () => {
          //return require('@/assets/images/index/header-bg.jpg')
          return require('../images/bg.png')
        }
      }
    },

    mounted() {
      // let time = setInterval(() => {
      //   if (!this.loading) {
      //     this.val = 100
      //     clearInterval(time)
      //   }
      //   this.val += 1
      //   if (this.val == 100) {
      //     this.val = 0
      //   }
      // }, 1000 / 100)

    }
  }
  //class="bg-gray" :style="{backgroundImage:`url(${bodyImage})`}"
</script>

<style lang="scss" scoped>
  .loading-style {
    position: fixed;
    top: 0;
    border: none;
    background: rgba(66, 133, 244, 1);
    box-shadow: 0 0 1rem rgba(66, 133, 244, .5);
    z-index: 3;
    height: 2px;
    border-radius: 2px;
    animation: loading-dash .6s ease-in-out infinite;
  }
  @keyframes loading-dash {
    0% {
      left: 50%;
      right: 50%;
      opacity: 0;
    }
    100%{
      left: 0;
      right: 0;
      opacity: 1
    }
  }
</style>
